<template>
  <div class="axiosTest">
	<h1>测试 Axios 数据获取</h1>
    <button @click="getData"> getData </button>
	
	<el-button @click="addStoreCount" type="success">addStoreCount</el-button>
    <ul>
      <li v-for="data in list" v-bind:class="listyle">
        {{data.title}}
      </li>
    </ul>
  </div>
</template>

<script>
	import store from '../../vuex/store.js'
	import axios from 'axios';
	export default {
	  // name: 'HelloWorld',
	  store,
	  data () {
		return {
		  listyle:"licss",
		  list:[],
		  msg:'从上一个组件传入的msg,也可以传入list，如下面数据'
		}
	  },
	  methods:{
		  addStoreCount(){
			this.$store.commit('insCount');
		  },
		getData:function(event){
		  var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
		  axios.get(api)
			.then((response)=>{
			  console.log(response.data.result.length);
			  this.list = response.data.result;
			})
			.catch((err)=>{
			  console.error("api error。。。",err)
			})
			.then(()=>{
			  console.info("纳尼？")
			})
		}
	  },
	  mounted() {
		// this.getData();
	  }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.licss{
  text-align: left;
}
body{
	font-size: 20;
}
</style>
